<template>
  <view class="pages-box" :style="{backgroundImage:'url('+adminUrl+'/static/images/top_bg.jpg)'}">
	<u-navbar :is-back="false" title="惠摩保" :border-bottom="false" :background="{width:'100vw', backgroundImage: 'url('+adminUrl+'/static/images/top_bg.jpg)',backgroundPosition:'top left',backgroundRepeat:'no-repeat',backgroundSize:'cover' }"></u-navbar>
    <view class="index-swiper-box">
		<u-swiper 
			:height="250" 
			:list="swiper.list" 
			:title="swiper.title" 
			:indicator-pos="swiper.indicatorPos" 
			:mode="swiper.mode" 
			:interval="3000" 
			:indicator="swiper.indicator"
			:indicatorMode="swiper.indicatorMode"
			:loading = "swiper.loading"
			height="278" 
			border-radius="10" 
			bg-color="#ffffff"
			@click="goToSwiper"
		></u-swiper>
    </view>
    <view class="menu-index-box acea-row row-between-wrapper row-middle padding20">
		<view class="menu-item acea-row row-center-wrapper" v-for="(item,index) in menuList" :key="index" @click="goto(item.path,item.isTab)" :class="index==0?'leftItem':'rightItem'">
			<image :src="item.iconImg"></image>
		</view>
	</view>

    <view class="news-index-box pad30">
		<view class="title acea-row row-between-wrapper magt30">
			<view class="size32 font600">热点资讯</view>
			<view @click="goto('/pages/news/index',true)">更多<text class="iconfont icon-xiangyou"></text></view>
		</view>
		<view class="news-list">
			<news-list :list="newsData"></news-list>
		</view>
	</view>
	<!-- <u-loadmore :status="status" /> -->
	<view class="uni-p-b-98"></view>
	<page-nav></page-nav>
  </view>
</template>

<script>
	import {mapGetters} from "vuex";
	import {indexBanner,indexGGnews,indexNewsList,getKaicha,getKfInfo} from "@/api/index.js"
	import newsList from "@/components/news_list.vue"
	import {Http_admin_url} from "@/config/config.js"
	import pagenav from "@/components/page-nav/page-nav.vue"
	var statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
	import store from "@/store";
	let app=getApp()
	export default {
		computed: mapGetters(['userInfo','uid']),
		components:{
			newsList,
			pagenav
		},
	  data(){
		return{
			adminUrl:Http_admin_url,
			navH: "",
			statusBarHeight: statusBarHeight,
			marTop:0,
			addrShow:false,
			defaultAddr:[],
			swiper:{
				list: [],
				title: false,
				mode: 'none',
				indicatorPos: 'bottomCenter',
				effect3d: true,
				indicator: true,
				indicatorMode:'dot',
				loading:true
			},
			menuList:[
				{
					title:'商业险 ',
					notes:'',
					iconImg:Http_admin_url+'/static/images/sybtn.png',
					path:'/pages/about/index?id=2',
					isTab:false
				},
				{
					title:'交强险 ',
					notes:'',
					iconImg:Http_admin_url+'/static/images/jqbtn.png',
					path:'/pages/about/index?id=3',
					isTab:false
				},
				{
					title:'盗抢险',
					notes:'',
					iconImg:Http_admin_url+'/static/images/dqbtn.png',
					path:'/pages/about/index?id=4',
					isTab:false
				},
				{
					title:'意外险',
					notes:'',
					iconImg:Http_admin_url+'/static/images/ywbtn.png',
					path:'/pages/about/index?id=5',
					isTab:false
				},
				{
					title:'电瓶车',
					notes:'',
					iconImg:Http_admin_url+'/static/images/dpcbtn.png',
					path:'/pages/about/index?id=6',
					isTab:false
				}
			],
			noticeData:{
				show: true,
				autoplay: false,
				type: 'none',
				list: [],
				mode: 'vertical',//vertical上下，horizontal左右
				playState: 'play',
				speed: 60,
				duration: 5000,
				moreIcon: false,
				volumeIcon: false,
				isCircular: false,
				current: 0
			},
			noticeList:[],
			newsData:[],
			status: 'loadmore',
			limt: 10,
			page: 1,
			total: 0,
			kflink:''
		}
	  },
	  created() {
		this.getKfInfo()
		this.getBanner()
		this.getIndexNews()
	  },
	  onLoad() {
	  },
	  onShow() {
		let self = this
		// #ifdef APP-PLUS
	  	let barHeight = uni.getSystemInfoSync().statusBarHeight;
	  	self.marTop = barHeight + 40; //刘海屏
	  	// #endif
	  },
	  onShareAppMessage: function() {
	  	return {
	  		title: this.$config.shareTitle,
	  		imageUrl: this.adminUrl+'/upload/goulogo.png',
	  		desc: this.$config.shareTitle,
	  		path: '/pages/main/index/index?uid=' + this.uid
	  	};
	  },
	  onShareTimeline: function() {
	  	return {
	  		title: this.$config.shareTitle,
	  		imageUrl: this.adminUrl+'/upload/goulogo.png',
	  		desc: this.$config.shareTitle,
	  		path: '/pages/main/index/index?uid=' + this.uid
	  	};
	  },
	  methods:{
		  goToSwiper(e){
			let swiper = this.swiper.list[e]
			if(swiper.linkurl == '#' || swiper.linkurl == ''){
				this.goTokefu()
			}else{
				uni.redirectTo({
					url:swiper.linkurl
				})
			}
		  },
		  // 获取客服链接
		  getKfInfo(){
		  	getKfInfo(1).then(res=>{
		  		if(res.code == 900){
		  			this.kflink = res.data.link
		  		}
		  	})
		  },
		  // 联系客服
		  goTokefu(){
		  	let that=this
		  	// console.log('kflink',that.kflink)
		  	// #ifdef MP-WEIXIN
		  	wx.openCustomerServiceChat({
		  		extInfo: {
		  			url: that.kflink,
		  		},
		  		corpId: that.$config.qywxId,
		  		success(res) {
		  			console.log('成功了',res)
		  			that.saverOrder()
		  		},
		  		fail: function(err) {
		  		    // 打开客服会话失败的回调
		  		    console.error('打开客服会话失败', err);
		  		}
		  	})
		  	// #endif
		  },
		  goto(path,isTab){
			  if(isTab){
				 return uni.switchTab({
					  url:path
				  })
			  }
			  uni.navigateTo({
				url:path
			  })
		  },
		  getBanner(){
			  this.swiper.list=[]
			  indexBanner().then(res=>{
				  if(res.code==900){
					  res.data.forEach((item,index)=>{
						  let arr={
							  image:this.adminUrl+item.pic.replace(/\\/g,"/"),
							  linkurl:item.linkurl
						  }
						  this.swiper.list.push(arr)
					  })
					  // this.swiper.list = res.data
				  }
			  })
		  },
		  getIndexNews(){
			  indexNewsList().then(res=>{
				  if(res.code==900){
					  // res.data.forEach(item=>{
						 //  item.pic = item.pic.replace(/\\/g,"/")
					  // })
					  this.newsData=res.data
				  }
			  })
		  }
	  },
	  onReachBottom() {
			this.getIndexNews()
		}
	}

</script>

<style lang="scss" scoped>
	.index-swiper-box{
		width: 100%;
		// height: 278rpx;
		padding: 0 20rpx;
	}
	.bar-box{
		width: 100%;
		position: fixed;
		top: 0;
		background-color: #ffffff;
		z-index: 9999;
	}
	.menu-index-box{
		.menu-item{
			width: calc(50% - 16rpx);
			// background-color: #E3E3E3;
			margin: 8rpx;
			height: 152rpx;
			// border-radius: 50%;
			// text-align: center;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.menu-item:nth-child(n){
			margin: 20rpx 8rpx 0;
		}
		.menu-item:nth-child(2n){
			margin: 20rpx 0 8rpx;
		}
		.menu-item:last-child{
			width: 100%;
			margin: 20rpx 0;
		}
		.leftItem{
			border-top-left-radius: 24rpx;
			border-bottom-left-radius: 24rpx;
			margin-right: 20rpx;
		}
		.rightItem{
			border-top-right-radius: 24rpx;
			border-bottom-right-radius: 24rpx;
		}
	}
	.news-index-box{
		margin-bottom: 30rpx;
		.title{
			text-align: center;
			position: relative;
			letter-spacing: 4rpx;
		}
	}
</style>